<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper ">
            <a-form layout="inline">

              <a-form-item label="区域编码">
                <a-input autocomplete="off" placeholder="请输入区域编码" v-model="queryParam.no.value"></a-input>
              </a-form-item>
              <a-form-item label="区域名称">
                <a-input autocomplete="off" placeholder="请输入区域名称" v-model="queryParam.name.value"></a-input>
              </a-form-item>
                <a-form-item>
                    <span class="table-page-search-submitButtons">
                        <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                        <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
                        <a-button type="primary" @click="handleInit" icon="reload">初始化</a-button>
                        <a-button type="primary" @click="handleAdd({data:{}})" icon="plus">新增</a-button>
                    </span>
                </a-form-item>
            </a-form>
        </div>
        <!-- table区域-begin -->
        <div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
                <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
                <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            </div>

            <a-table v-if="dataSource.length>0"
                    ref="table"
                    bordered
                    size="middle"
                    :rowKey="(record)=>record.data.id"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="pagination"
                    :loading="loading"
                    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                    @change="handleTableChange">
                <template slot="filePrew" slot-scope="text, record">
                    <AkFilePreview :value="text"></AkFilePreview>
                </template>
                <template slot="akEllipsis" slot-scope="text, record">
                    <AkEllipsis :value="text"></AkEllipsis>
                </template>
                <template slot="richText" slot-scope="text, record">
                    <AkEllipsis :value="text"></AkEllipsis>
                </template>
                <span slot="action" slot-scope="text, record" class="table-operator">
                  <a @click="handleEdit(record)">编辑</a>
                  <a  @click="handleDelete(record.data.id)">删除</a>
                  <a  @click="handleAdd(record)">新增下级</a>
                </span>
            </a-table>
        </div>
        <base-region-modal ref="modalForm" @ok="modalFormOk"></base-region-modal>
    </a-card>
</template>

<script>
    import AkfhListMixin from '../../mixin/AkfhListMixin';
    import AkFilePreview from '../../components/akfh/file-preview/AkFilePreview'
    import AkEllipsis from "../../components/akfh/AkEllipsis";
    import BaseRegionModal from "./modules/BaseRegionModal";
    import {baseRegionUrl} from "../../api/url";
    import {postAction} from "../../api/manage";
    import AkDictSelectMultipleTag from "../../components/akfh/AkDictSelectMultipleTag";



    export default {
        name: "BaseRegionList",
        components: {
          AkDictSelectMultipleTag,
          AkEllipsis, AkFilePreview,BaseRegionModal},
        mixins:[AkfhListMixin],
        data(){
            return {
              pagination:{
                current: 1,
                pageSize: 3,
                pageSizeOptions: ['3','10', '20', '30','50','100','300','1000'],
                showTotal: (total, range) => {
                  return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
              },
              ipagination:false,
                queryParam:{
                  no:{
                    type:'like',
                    column:'no',
                    value:''
                  },
                  name:{
                    type:'like',
                    column:'name',
                    value:''
                  },
                },
                // 表头
                columns: [
                    {
                        title: '#',
                        dataIndex: '',
                        key:'rowIndex',
                        width:60,
                        align:"center",
                        customRender:function (t,r,index) {
                            return parseInt(index)+1;
                        }
                    },
                  {
                    title: "行政区域编码",
                    dataIndex: "data.no",
                    scopedSlots: { customRender: "akEllipsis" }
                  },
                  {
                    title: "行政区域名称",
                    align: "center",
                    dataIndex: "data.name",
                    scopedSlots: { customRender: "akEllipsis" }
                  },
                  {
                    title: "类型",
                    align: "center",
                    dataIndex: "data.type_dictText",
                    scopedSlots: { customRender: "akEllipsis" }
                  },
                  {
                    title: "排序",
                    align: "center",
                    dataIndex: "data.sort",
                  },
                  {
                      title: '操作',
                      dataIndex: 'action',
                      align:"center",
                      width:200,
                      scopedSlots: { customRender: 'action' },
                  }
                ],
                url:baseRegionUrl
            }
        },

        methods:{
          handleTableChange(pagination) {
            this.loading = true;
            setTimeout(()=>{
              this.pagination = pagination;
              this.$nextTick(()=> this.loading=false);
            }, 500);
          },
          handleEdit(record){
            this.$refs.modalForm.edit(record.data);
            this.$refs.modalForm.title = "编辑";
          },
          handleAdd(record) {
            this.$refs.modalForm.add({parentId:record.data.id});
            this.$refs.modalForm.title = "新增";
          },
          handleInit(){
            postAction(this.url.init)
              .then(res=>{
                if(res.success){
                  this.$message.success(res.message);
                }
              })
          }
        }
    }
</script>

<style scoped>

</style>
